<!-- 服务商详情页 -->
<template>
  <div class="container">
    <header-nav></header-nav>
    <div class="mincard mindWidth">
      <span @click="$router.push('/')">首页</span>>
      <span>服务商查询</span>
    </div>
    <div class="search-content mindWidth">
      <div class="flex items-middle">
        关键字：
        <div class="flex items-middle">
          <input type="text" v-model="form.companyName" />
          <div class="btn" @click="changeValue">搜索</div>
        </div>
      </div>
    </div>
    <div class="serverMain mindWidth">
      <div class="content_main">
        <!-- 正文 -->
        <div class="title_content">
          <img src="../../../static/image/serve/logo_title.png" alt />
          <h3>优质服务商</h3>
        </div>
        <div class="streamer_content flex flex-wrap">
          <!-- <ul> -->
          <a
            class="changeHanld"
            v-for="(item, index) in companyList"
            :key="index"
            :href="`/dedils/${item.id}`"
          >
            <div class="iamge_broder">
              <img :src="imgBaseUrl + item.companyLogo" />
            </div>
            <div class="title">{{ item.companyName }}</div>
            <div class="business">
              简介：
              {{ item.synopsis }}
            </div>
          </a>
          <!-- </ul> -->
        </div>
      </div>
      <!-- 分页 -->
      <div class="page-content">
        <paging
          ref="page"
          @CurrentPage="changePageNo"
          :total="total"
          :pageNo="form.pageNo"
          :pageSize="form.pageSize"
        ></paging>
      </div>
    </div>
    <navigation></navigation>
    <footerNav />
  </div>
</template>
<script>
import { imgBaseUrl, getSerivice } from "../../api/api.js";

import { debounce } from "../../util/throttle.js";
import paging from "../../components/PageQuery.vue";
export default {
  components: {
    paging
  },
  data() {
    return {
      dataName: "",
      companyList: [],
      total: 0,
      imgBaseUrl: imgBaseUrl,
      form: {
        pageNo: 1,
        pageSize: 9,
        companyName: ""
      }
    };
  },
  head() {
    return {
      title: `服务商-比目镜`,
      meta: [
        { hid: "keywords", name: "keywords", content: "服务商" },
        { hid: "description", name: "description", content: "服务商" }
      ]
    };
  },
  watch: {
    dataName: debounce(function(e) {
      this.changeValue();
    }, 500)
  },
  async asyncData({ store, route }) {
    let params = {
      pageNo: 1,
      pageSize: 9,
      companyName: ""
    };
    let { result } = await getSerivice(params);
    let total = result.total;
    return {
      companyList: result.records,
      total: total
    };
  },
  mounted() {
    // this.getList()
  },
  methods: {
    changeValue() {
      this.form.pageNo = 1;
      this.companyList = [];
      this.getList();
    },
    getList() {
      getSerivice(this.form).then(res => {
        this.companyList = res.result.records;
        this.total = res.result.total;
      });
    },
    // 切换分页
    changePageNo(value) {
      this.form.pageNo = value;
      this.getList();
    }
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.container {
  .mincard {
    span {
      font-size: 14px;
      cursor: pointer;
      margin: 0 10px;
    }
  }
  .search-content {
    background-color: #ffffff;
    box-shadow: 0px 0px 10px #eeeeee;
    padding: 20px 30px;
    box-sizing: border-box;
    input {
      display: inline-block;
      width: 240px;
      height: 32px;
      background: #ffffff;
      border: 1px solid #daeaf5;
      border-radius: 4px 0px 0px 4px;
      box-sizing: border-box;
      padding-left: 12px;
    }
    .btn {
      box-sizing: border-box;
      width: 60px;
      height: 32px;
      line-height: 30px;
      background: #44a2ff;
      border-radius: 0px 4px 4px 0px;
      text-align: center;
      margin-left: -1px;
      color: #ffffff;
      cursor: pointer;
    }
  }
  .content_main {
    margin-top: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    background-color: #fff;

    .streamer {
      img {
        width: 1160px;
        height: 160px;
      }
    }

    .title_content {
      display: flex;
      align-items: center;
      height: 80px;

      h3 {
        font-size: 18px;
        color: #333333;
        margin-left: 20px;
      }

      img {
        width: 20px;
        height: 20px;
      }
    }

    .streamer_content {
      a {
        margin-bottom: 20px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-right: 100px;
        width: 320px;
        // height: 260px;
        border: 1px solid #daeaf5;

        &:nth-child(3n) {
          margin-right: 0px;
        }

        .iamge_broder {
          width: 142px;
          height: 160px;
          display: flex;
          align-items: center;
          margin: 0px auto;

          img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
          }
        }

        .business {
          font-size: 14px;
          color: #aaa;
          margin-top: 8px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }

        .title {
          text-align: center;
          margin-bottom: 20px;
          color: #333;
          font-size: 16px;
        }
      }
      a:hover {
        border: 1px solid #1678ff;
      }
    }
  }
  .page-content {
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 0 20px;
    text-align: right;
  }
}
</style>
